<template>
  <div class="homeAir">
    <!-- 头部 -->
    <h3><i class="iconfont iconfeiji"></i><span>国内机票</span></h3>
    <!-- 搜索框 和广告 -->
    <div class="searchInquire">
      <!-- 搜索框 -->
      <SearchForm class="search" />
      <!-- 广告图片 -->
      <div class="advertising">
        <img src="http://157.122.54.189:9093/images/pic_sale.jpeg" />
      </div>
    </div>
    <!--  广告-->
    <div class="advertisingColumn">
      <el-col :span="8" class="mokuai">
        <i
          class="iconfont iconweibiaoti-_huabanfuben"
          style="color: #409eff"
        ></i
        ><span>100%航协认证</span>
      </el-col>

      <el-col :span="8" class="mokuai">
        <i class="iconfont iconbaozheng" style="color: green"></i>
        <span>出行保证</span>
      </el-col>

      <el-col :span="8" class="mokuai">
        <i class="iconfont icondianhua" style="color: #409eff"></i>
        <span>7x24小时服务</span>
      </el-col>
    </div>

    <!-- 特价机票 -->
    <h2 class="air-sale-title">
      <span class="iconfont icontejiajipiao"></span>
      <i>特价机票</i>
    </h2>
    <div class="special">
      <div class="special_img">
        <el-row type="flex" class="air-sale-pic" justify="space-between">
          <el-col class="img" :span="6" v-for="(v, i) in sales" :key="i">
            <nuxt-link
              :to="`/air/flights?departCity=${v.departCity}&departCode=${v.departCode}&destCity=${v.destCity}&destCode=${v.destCode}&departDate=${v.departDate}`"
            >
              <img :src="'http://157.122.54.189:9095' + v.cover" alt="" />
              <el-row class="layer-bar" type="flex" justify="space-between">
                <span>{{ v.departCity }}-{{ v.destCity }}</span>
                <span class="spans">￥{{ v.price }}</span>
              </el-row>
            </nuxt-link>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sales: [],
    };
  },
  mounted() {
    this.$axios({
      url: "/airs/sale",
    }).then((res) => {
      // console.log(res.data);
      this.sales = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.homeAir {
  width: 1000px;
  margin: 0 auto;
  height: 650px;
  h3 {
    i,
    span {
      height: 50px;
      line-height: 50px;
      color: orange;
    }
  }
  .searchInquire {
    display: flex;
    height: 330px;
    margin-bottom: 20px;
    .search {
      flex: 1;
      border: 1px solid #ccc;
      height: 100%;
    }
    .advertising {
      flex: 1;
      img {
        width: 630px;
        height: 100%;
      }
    }
  }
}
// 广告
.advertisingColumn {
  border: 1px solid #ccc;
  height: 58px;

  .mokuai {
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mokuai:nth-child(1) {
    border-right: 1px solid #ccc;
  }
  .mokuai:nth-child(2) {
    border-right: 1px solid #ccc;
  }
}

// 特价机票
.air-sale-title {
  margin: 10px 0;
  font-size: 20px;
  font-weight: normal;
  color: #409eff;

  span {
    font-size: 20px;
  }
}
.special {
  height: 120px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  padding: 10px;
  .special_img {
    border: 1px solid #ccc;
    height: 100%;
    width: 100%;
    .img {
      position: relative;
      width: 100%;
      height: 120px;
      border: 1px solid #ccc;
      display: block;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .img:nth-child(1) {
      margin-left: 0;
    }
  }
}
.layer-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #ccc;
  height: 30px;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  line-height: 30px;
  padding: 0 10px;
}
</style>